<template>
  <div class="content">
    <div class="leftBlock">
      <a-form-model :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="短信内容">
          <a-input v-model="formData.content" placeholder="请输入内容" type="textarea" :rows="7" />
        </a-form-model-item>
        <a-form-model-item label="电话号码">
          <div style="display: flex">
            <a-input placeholder="请输入电话号码" style="width: 250px" v-model="addPhone"  />
            <a-button class="shallowTheme-bg border-0" @click="handleAddPhone" style="margin-left: 20px" type="primary" icon="plus-circle"
              >确认添加</a-button
            >
          </div>
        </a-form-model-item>
        <a-form-model-item label="已选号码">
          <a-input placeholder="" v-model="formData.phoneList" type="textarea" :rows="7" disabled />
          <div>
            共有号码数：<span class="theme-color">{{formData.phone.length}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <!-- 有效号码数：<span class="theme-color">0</span> -->
          </div>
        </a-form-model-item>
        <a-form-model-item label="添加号码">
          <a-space style="margin-left: 10px">
            <a-button class="shallowTheme-bg border-0" type="primary" icon="delete" @click="empty"> 号码清空 </a-button>
            <a-button class="shallowTheme-bg border-0" @click="showModal" type="primary" icon="plus-circle">
              导入通讯录
            </a-button>
          </a-space>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button class="shallowTheme-bg border-0" type="primary" @click="handleOk"> 提交 </a-button>
          <span style="margin-left: 10px" class="warning-color"
            >*请勿重复提交！提交成功到审核页面查看提交信息，提交记录会有延迟*</span
          >
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="rightBlock">
      <p>注意事项：</p>
      <p>1、建议单次提交最好不超过50万个号码</p>
      <p>2、手动输入号码请用英文逗号或换行分隔</p>
      <p>3、内容不支持换行</p>
      <p>4、汉字、数字、英文和标点符号都表示1个长度</p>
      <p>5、发手机一条计费为70个字,长短信计费为每条67个字</p>
      <p>6、短信内容请加上签名,签名格式【公司名称】</p>
      <p>7、所有群发信息需经过人工审核才能发送,信息审核时间9:00-21:00/p></p>
      <p>8、群发内容不超过500字(包括标点符号)</p>
    </div>

    <a-modal v-model="visible" width="70%" title="通讯录列表" @ok="handleModalOk">
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-row>
          <a-col :span="7">
            <a-form-item label="分组">
              <a-select default-value="" style="width: 220px" placeholder="全部" v-model="select.groupId">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.id" v-for="(item, index) in groupingList" :key="index">{{
                  item.groupName
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item label="名字">
              <a-input placeholder="" style="width: 220px" v-model="select.name" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-space>
              <a-button type="primary" icon="search" @click="getContactsList">查询</a-button>
              <a-button style="background: #b38c01; color: #fff" type="primary" icon="reload" @click="reset"
                >重置</a-button
              >
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-table :data-source="table.list" :row-selection="rowSelection" :pagination="pagination" @change="handleTableChange">
        <a-table-column key="groupName" title="所属分组" data-index="groupName" />
        <a-table-column key="name" title="名字" data-index="name" />
        <a-table-column key="phone" title="手机号" data-index="phone" />
        <a-table-column key="createTime" title="操作时间" data-index="createTime" />
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { addSms, addGrouping, getSmsGroupList } from '@/api/SMSRelated'
export default {
  name: 'sendMessage',
  data() {
    return {
      select: {
        name: '',
        groupId: '',
      },
      formData: {
        content: '',
        phone:[],
        phoneList:'',
      },
      pagination: {
        current:1,
        pageSize:10,
        total:0,
      },
      addPhone:'',
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      visible: false,
      replaceFields: {
        children: 'child',
        title: 'name',
      },
      table: {
        list: [],
      },
      selectedRows:[],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows=selectedRows
        },
      },
      userInfo: {},
      groupingList: [],
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
    this.getGroupingList()
    this.getContactsList()
  },
  methods: {
    getGroupingList() {
      getSmsGroupList({ type: 1, userId: this.userInfo.id }).then((data) => {
        if (data.success) {
          this.groupingList = data.result
        }
      })
    },
    handleAddPhone(){
      if(!/^1[2-9]\d{9}$/.test(this.addPhone)){
        this.$message.error('手机号为空或格式不正确!');
      }else{
        this.formData.phone.push(this.addPhone)
        this.formData.phoneList=this.formData.phone.toString()
        this.addPhone=''
        this.$message.success('添加成功');
      }
    },

    empty(){
      this.formData.phone=[]
      this.formData.phoneList=''
    },
    handleModalOk(){
      this.visible=false
      this.selectedRows.forEach(item => {
        this.formData.phone.push(item.phone)
      });
      this.formData.phoneList=this.formData.phone.toString()
      
      console.log(this.formData.phoneList)
    },
    getContactsList() {
      getSmsGroupList({
        type: 2,
        userId: this.userInfo.id,
        name: this.select.name,
        groupId: this.select.groupId,
        page:this.pagination.current,
        size:this.pagination.pageSize,
      }).then((data) => {
        if (data.success) {
          this.table.list = data.result.data
          this.pagination.total=data.result.total
        }
      })
    },

    handleTableChange(pagination, filters, sorter) {
      this.pagination.current=pagination.current
      this.pagination.pageSize=pagination.pageSize
      this.getContactsList()
    },
    showModal() {
      this.visible = true
    },
    handleOk() {
      addSms({ type: 1, userId: this.userInfo.id, content: this.formData.content, phone:  this.formData.phoneList }).then(
        (data) => {
          if (data.success) {
            this.$message.success('申请成功!')
            this.formData.content = ''
            this.formData.phone = []
            this.formData.phoneList=''
            this.addPhone=''
          }
        }
      )
    },
    cancel(){},
    reset() {
      this.select.name = ''
      this.select.groupId = ''
      this.getContactsList()
    },
  },
}
</script>
<style scoped>
.content {
  height: 100%;
  width: 100%;
  background-color: #00252e;
  padding: 40px 68px 40px 0px;
  display: flex;
  justify-content: space-between;
}
.leftBlock {
  width: 62%;
  height: 100%;
}
.rightBlock {
  width: 38.1%;
  height: 100%;
  background-color: #01232c;
  color: #0fa3b1;
  padding: 30px;
  border: 1px solid #0a6a78;
  box-sizing: border-box;
}
.modal {
  width: 100%;
  padding: 20px 0 80px 0;
}
.modalLeft {
  width: 25%;
  background-color: #01232c;
  height: 520px;
  border-right: 1px solid #98e6ea;
}
.modalRight {
  width: 75%;
  height: 520px;
  background-color: #01232c;
}
.modalTitle {
  font-size: 26px;
  color: #fff;
  line-height: 76px;
  text-align: center;
  height: 76px;
  background-image: linear-gradient(to right, #10a1b4, #02566e);
}
/deep/.anticon {
  color: #fff !important;
}
.tableStyle {
  margin-top: 60px;
  background-color: #01232c !important;
  border: 1px solid #0a6a78;
  width: 90%;
  margin: 60px auto 0 auto;
}
/deep/.ant-table-thead > tr > th {
  background-color: #033840 !important;
  color: #fff;
}
/deep/.ant-table-placeholder {
  background-color: #01232c !important;
  border-top: 1px solid #0a6a78;
  border-bottom: 0;
  color: #fff;
}
/deep/.ant-empty-normal {
  color: #fff !important;
}
</style>